<template>
    <div class="diskInfoWrap">
        <div height="80%">
            <el-form
                :model="flowSearchParams"
                size="small"
                label-width="100px"
                class="formInline"
            >
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="交易机构：">
                            <SelectTreeCom
                                v-model="flowSearchParams.jyjg"
                                :isAll="false"
                                :depStatus="depStatus"
                                ref="SelectTreeCom"
                            ></SelectTreeCom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                      <el-form-item
                          label="保单号/保全号/定期结算号："
                          label-width="170px"
                      >
                        <el-input
                            v-model="flowSearchParams.ywbh"
                            placeholder="请输入保单号/保全号/定期结算号"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="险种简称：">
                            <el-input
                                v-model="flowSearchParams.xzjc"
                                placeholder="请输入险种简称"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="10">
                        <el-form-item label="交易日期：">
                            <el-date-picker
                                v-if="showDate"
                                v-model="date1"
                                type="daterange"
                                range-separator="~"
                                value-format="yyyy-MM-dd"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 100%"
                                clearable
                                @change="changeDate"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="获票人名称："  label-width="170px">
                            <el-input
                                v-model="flowSearchParams.kfhm"
                                placeholder="请输入获票人名称"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="投保单号：">
                            <el-input
                                v-model="flowSearchParams.tbdh"
                                placeholder="请输入投保单号"
                            ></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item
                      label="税率："
                      prop="sysl"
                      :rules="[
                                {
                                    pattern: /^[01]$|^0.\d{2}/,
                                    // message: '只能输入0-1范围内的小数，保留小数点后两位',
                                    message: '*',
                                    trigger: 'blur',
                                },
                            ]"
                  >
                    <el-input
                        v-model="flowSearchParams.sysl"
                        placeholder="请输入小于1的小数，保留两位小数"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :push="6">
                  <div style="float: right">
                    <el-button
                        type="primary"
                        @click="onSubmit"
                        size="small"
                    >
                      查询
                    </el-button>
                    <el-button
                        type="primary"
                        @click="onReset"
                        size="small"
                    >
                      重置
                    </el-button>

                  </div>
                </el-col>

              </el-row>
            </el-form>
            <el-button
                type="primary"
                @click="onOpenFlows"
                size="small"
                :disabled="selectList.length === 0"
            >
              查看原流水
            </el-button>
            <tableList
                :showIndex="true"
                :loading="loading"
                border
                :showSelectColumn='true'
                :keySet="keySet2"
                heightMin="180"
                maxHeight="580"
                ref="multipleTable"
                :tableData="listDetails2"
                :paginationShow="true"
                :pageNumber="pages.current"
                :pageSize="pages.size"
                :total="pages.total"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
                @handleSelectionChange="handleSelectionChange"
                @rowClick="rowClickFn"
            >
                <template #invoiceState="{ row }">
                    <div :class="row.fpzt == '已红冲' ? 'redBG' : 'bg'">
                        {{ row.fpzt }}
                    </div>
                </template>

                <template #czlx="row">
                    <el-tag type="danger" v-if="row.row.czlx == '1'">拆</el-tag>
                    <el-tag type="success" v-if="row.row.czlx == '2'">
                        合
                    </el-tag>
                </template>
                <template #wkpje="row">
                    <span v-if="row.row.wkpje < 0" style="color: red">
                        {{ row.row.wkpje }}
                    </span>
                    <span v-else>{{ row.row.wkpje }}</span>
                </template>
                <template #jyrmbje="row">
                    <span v-if="row.row.jyrmbje < 0" style="color: red">
                        {{ row.row.jyrmbje }}
                    </span>
                    <span v-else>{{ row.row.jyrmbje }}</span>
                </template>
                <template #bhsje="row">
                    <span v-if="row.row.bhsje < 0" style="color: red">
                        {{ row.row.bhsje }}
                    </span>
                    <span v-else>{{ row.row.bhsje }}</span>
                </template>
                <template #xxse="row">
                    <span v-if="row.row.xxse < 0" style="color: red">
                        {{ row.row.xxse }}
                    </span>
                    <span v-else>{{ row.row.xxse }}</span>
                </template>
            </tableList>
        </div>

        <div height="20%">
            <tableList
                :loading="loading"
                border
                maxHeight="220"
                :keySet="keySet3"
                ref="multipleTable"
                :tableData="listDetails3"
                :paginationShow="false"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
                @handleSelectionChange="handleSelectionChange"
            ></tableList>
        </div>
      <flowMergingSplitDialog ref="flowMergingSplit"></flowMergingSplitDialog>
    </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import { getList, queryInvoice } from '@/api/flowRecallInvoiceSearch.js'
import { throttle } from 'lodash'
import DictSelect from '@/views/invoiceTemplate/components/DictSelect/DictSelect.vue'
import SelectTreeCom from '@/components/selectTree/selectTreeCom.vue'
import { DictCode } from '@/utils/DictConstant'
import Vue from 'vue'
import flowMergingSplitDialog from "@/components/transactionFlowInvoice/flowMergingSplitDialog.vue";

export default {
    name: 'flowRecallInvoiceSearch',
    computed: {
        DictCode() {
            return DictCode
        },
    },
    mixins: [mixinTable],

    data() {
        return {
            date1: ['', ''],
            depStatus: false,
            rdid: '',
            showDate: true,
            listDetails2: [],
            listDetails3: [],
            selectList: [],
            detailTableData: [],
            flowSearchParams: {
                jyjg: '',
                kfhm: '',
                tbdh: '',
                ywbh: '',
                xzjc: '',
                sysl: '',
                jyrqq: '',
                jyrqz: '',
            },
            keySet2: [
                {
                    label: '状态',
                    englishName: 'czlx',
                    width: 80,
                    isSlot: true,
                    slotName: 'czlx',
                    sortable: true,
                },
                {
                    label: '流水号',
                    englishName: 'jyls',
                    width: 180,
                },
                {
                    label: '交易日期',
                    englishName: 'jyrq',
                    width: 100,
                    sortable: true,
                },
                {
                    label: '业务编号',
                    englishName: 'ywbh',
                    width: 140,
                    sortable: true,
                },
                {
                    label: '原业务编号',
                    englishName: 'ysjyls',
                    width: 140,
                    sortable: true,
                },
                {
                    label: '业务类型',
                    englishName: 'ywlx',
                    width: 100,
                    sortable: true,
                },
                {
                    label: '保全项目代码',
                    englishName: 'bqxmdm',
                    width: '120',
                },
                {
                    label: '保全项目名称',
                    englishName: 'bqxmmc',
                    width: '120',
                },
                {
                    label: '未开票金额',
                    englishName: 'wkpje',
                    width: '180',
                    isSlot: true,
                    slotName: 'wkpje',
                    sortable: true,
                },
                {
                    label: '交易金额(含税)',
                    englishName: 'jyrmbje',
                    width: '180',
                    isSlot: true,
                    slotName: 'jyrmbje',
                    sortable: true,
                },
                {
                    label: '交易金额(不含税)',
                    englishName: 'bhsje',
                    width: '180',
                    isSlot: true,
                    slotName: 'bhsje',
                    sortable: true,
                },
                {
                    label: '税率',
                    englishName: 'sysl',
                    width: '100',
                    sortable: true,
                },
                {
                    label: '税额',
                    englishName: 'xxse',
                    width: '120',
                    isSlot: true,
                    slotName: 'xxse',
                    sortable: true,
                },
                {
                    label: '获票人名称',
                    englishName: 'tbrxm',
                    width: '180',
                    sortable: true,
                },
                {
                    label: '纳税人识别号',
                    englishName: 'nsrsbh',
                    width: 200,
                },
                {
                    label: '是否个人业务',
                    englishName: 'isgryw',
                    width: 120,
                },
                {
                    label: '证件类型',
                    englishName: 'zjlx',
                    width: 100,
                },
                {
                    label: '证件号码',
                    englishName: 'zjhm',
                    width: 180,
                },
                {
                    label: '险种代码',
                    englishName: 'xzdm',
                    width: 100,
                    sortable: true,
                },
                {
                    label: '险种简称',
                    englishName: 'xzjc',
                    width: 170,
                },
                {
                    label: '险种全称',
                    englishName: 'xzqc',
                    width: 260,
                },
                {
                    label: '备注',
                    englishName: 'bz',
                    width: 200,
                },
                {
                    label: '交易机构',
                    englishName: 'jyjgmc',
                    width: 180,
                },
                {
                    label: '投保单号',
                    englishName: 'tbdh',
                    width: 150,
                },
                {
                    label: '学平险受理号',
                    englishName: 'XPXSLH',
                    width: 150,
                },
                {
                    label: '汇交单号',
                    englishName: 'hjdh',
                    width: 150,
                },
                {
                    label: '税优识别码',
                    englishName: 'SYSBM',
                    width: 120,
                },
                {
                    label: '缴费方式',
                    englishName: 'jffs',
                    width: 100,
                },
                {
                    label: '缴费起期',
                    englishName: 'jfqsrq',
                    width: 100,
                },
                {
                    label: '缴费止期',
                    englishName: 'jfjzrq',
                    width: 100,
                },
                {
                    label: '手机号',
                    englishName: 'sjh',
                    width: 110,
                },
                {
                    label: '电子邮箱',
                    englishName: 'dzyx',
                    width: 130,
                },
                {
                    label: '服务人员姓名',
                    englishName: 'fwryxm',
                    width: 130,
                },
                {
                    label: '服务人员编号',
                    englishName: 'fwrybh',
                    width: 130,
                },
                {
                    label: '部',
                    englishName: 'bmc',
                    width: 130,
                },
                {
                    label: '区',
                    englishName: 'qmc',
                },
                {
                    label: '组',
                    englishName: 'zmc',
                },
                {
                    label: '来源系统',
                    englishName: 'sjly',
                },
                {
                    label: '保单来源',
                    englishName: 'bdly',
                },
                {
                    label: '供数日期',
                    englishName: 'gsrq',
                },
                {
                    label: '流水状态',
                    englishName: 'lszt',
                },
            ],
            keySet3: [
                {
                    label: '发票代码',
                    englishName: 'fpdm',
                    width: 140,
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                    width: 140,
                },
                {
                    label: '发票类型',
                    englishName: 'fplxdm',
                    width: 110,
                },
                {
                    label: '发票状态',
                    englishName: 'fpzt',
                    width: 100,
                },
                {
                    label: '开票日期',
                    englishName: 'kprq',
                    width: 100,
                },
                {
                    label: '应税商品及劳务',
                    englishName: 'spmc',
                    width: '150',
                },
                {
                    label: '规格型号',
                    englishName: 'ggxh',
                    width: '150',
                },
                {
                    label: '计量单位',
                    englishName: 'jldw',
                    width: '150',
                },
                {
                    label: '单价(含税)',
                    englishName: 'hsdj',
                    width: 150,
                },
                {
                    label: '单价(不含税)',
                    englishName: 'dj',
                    width: '150',
                },
                {
                    label: '数量',
                    englishName: 'gmsl',
                    width: '150',
                },
                {
                    label: '金额(含税)',
                    englishName: 'hsje',
                    width: 150,
                },
                {
                    label: '金额(不含税)',
                    englishName: 'je',
                    width: '150',
                },
                {
                    label: '税率',
                    englishName: 'sl',
                    width: '150',
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: '150',
                },
                {
                    label: '发票id',
                    englishName: 'oidid',
                    width: '150',
                },
                {
                    label: '发票项目id',
                    englishName: 'iviid',
                    width: 200,
                },
            ],
        }
    },
    mounted() {

    },
    components: {
        DictSelect,
        tableList,
        SelectTreeCom,
        flowMergingSplitDialog
    },
    methods: {
        handleSelectionChange(val) {
            this.selectList = val.ids || []
        },
        onSubmit() {
            let params = {}
            this.pages.current = 1
            this.getList(params)
        },
        onReset() {
            this.onReSetFn()
            this.date1=[]
            this.flowSearchParams.jyjg=this.$store.state.user.baseInfo.deptCode
        },
        onReSetFn() {
            this.mixinTableList = []
            this.pages = {
                ...this.pages,
                // current: 1,
            }
            this.flowSearchParams = {
                jyjg: '',
                kfhm: '',
                tbdh: '',
                ywbh: '',
                xzjc: '',
                sysl: '',
                jyrqq: '',
                jyrqz: '',
            }
        },
        getList: throttle(async function () {
            this.listDetails3 = []
            this.selectList = []
            try {
                if (this.$refs.multipleTable.$refs.table) {
                    this.$refs.multipleTable.$refs.table.clearSelection()
                }
            } catch (error) {}
            this.loading = true
            let params = {
                pageNo: this.pages.current,
                pageSize: this.pages.size,
                ...this.flowSearchParams,
            }

            if (this.date1 !== null) {
                params.jyrqq = this.date1[0]
                params.jyrqz = this.date1[1]
            } else {
              params.jyrqq = ''
              params.jyrqz = ''
            }
            if (params.jyjg === '') {
                Vue.prototype['$message'].warning('请选择交易机构。')
                return
            }
            let jyqrNullFlag =
                (params.jyrqq === null || params.jyrqq === '') &&
                (params.jyrqz === null || params.jyrqz === '')
            if (jyqrNullFlag && params.ywbh === '' && params.kfhm === '') {
                Vue.prototype['$message'].warning(
                    '请选择交易日期、获票人名称、投保单号、保单号/保全号/定期结算号至少一项后在发起查询'
                )
                return
            }
            let { data, code, message } = await getList(params)
            if (code == 200) {
                this.loading = false
                this.listDetails2 = data.records
                this.pages.total = data.total
                this.pages.current = data.current
                this.pages.size = data.size
            } else {
                this.loading = false
            }
        }, 500),
        rowClickFn(val) {
            this.rdid = val.rdid
            if (val.lszt === '部分开票' || val.lszt === '全部开票') {
                this.queryInvoice()
            } else {
                this.listDetails3 = []
            }
            if (val.czlx === '1' || val.czlx === '2') {
                this.selectList = val
            } else {
                this.selectList = []
            }
        },
        queryInvoice: throttle(async function () {
            this.loading = true
            let { data, code, message } = await queryInvoice(this.rdid)
            if (code == 200) {
                this.loading = false
                this.listDetails3 = data
            } else {
                this.loading = false
            }
        }, 500),
        onOpenFlows(val) {
          this.$refs.flowMergingSplit.openDialog();
          this.$refs.flowMergingSplit.getList(this.selectList.rdid, this.selectList.czlx, "detail");
        },
      changeDate(date){
        if(date === null){
          this.date1 = ['','']
        }else if (!this.isWithinTwoMonths(date[0], date[1])) {
          this.$message.error('请选择两个月以内的日期范围');
          this.date1 = ['', ''];
        }
      },
      isWithinTwoMonths(startDate, endDate) {

        const start = new Date(startDate);
        const end = new Date(endDate);

        // 计算两个日期相差的月份数
        const monthsApart = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());

        // 判断月份数是否在范围内
        return monthsApart < 2;
      },
    },
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';

.diskInfoWrap {
    box-sizing: border-box;

    .head {
        display: flex;
        height: 18px;
        align-items: center;
        margin-bottom: 4px;
        margin-top: 4px;

        .colCLas {
            width: 4px;
            height: 100%;
            background-color: $allBg;
            margin-right: 12px;
        }

        .info {
            height: 100%;
            display: flex;
            align-items: center;
        }
    }

    .redBG {
        background-color: red;
        border-radius: 10px;
        text-align: center;
        line-height: 150%;
    }

    .bg {
        text-align: center;
    }

    .formInline :deep .el-form-item--small {
        margin-bottom: 4px;
    }
}
</style>

